<template>
  <div class="roleAuthorization">
    <!-- 点击事件阻止冒泡 -->
    <div class="box" @click="$event.stopPropagation()">
      <h2>权限分配</h2>
      <div class="Authorization">
        <div class="oneRank">
          <h4>已获得权限</h4>
          <div class="childrenBox">
            <div class="childrenBox" v-for="item in userForm" :key="item">
              <div class="oneRank">
                <el-button type="primary" disabled
                  >{{ item.authName }}{{ item.id }}
                  <el-icon class="el-icon--right"><Close /></el-icon>
                </el-button>
                <el-icon><CaretRight /></el-icon>
              </div>
              <div class="towRank">
                <div class="B" v-for="j in item.children" :key="j">
                  <div class="B1">
                    <el-button type="success" disabled
                      >{{ j.authName }}{{ j.id }}
                      <el-icon class="el-icon--right"><Close /></el-icon>
                    </el-button>
                    <el-icon><CaretRight /></el-icon>
                  </div>
                  <div class="threeRank">
                    <div class="C" v-for="k in j.children" :key="k">
                      <el-button type="warning" disabled
                        >{{ k.authName }}{{ k.id }}
                        <el-icon class="el-icon--right"><Close /></el-icon>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h4>{{ pushId }}</h4>
          <h4>可添加权限</h4>
          <div class="childrenBox" v-for="item in jurisdictionTable" :key="item">
            <div class="oneRank">
              <el-button type="primary" plain @click="clId(item.id)"
                >{{ item.authName }}{{ item.id }}
                <el-icon class="el-icon--right"><Close /></el-icon>
              </el-button>
              <el-icon><CaretRight /></el-icon>
            </div>
            <div class="towRank">
              <div class="B" v-for="j in item.children" :key="j">
                <div class="B1">
                  <el-button type="success" plain @click="clId(j.id)"
                    >{{ j.authName }}{{ j.id }}
                    <el-icon class="el-icon--right"><Close /></el-icon>
                  </el-button>
                  <el-icon><CaretRight /></el-icon>
                </div>
                <div class="threeRank">
                  <div class="C" v-for="k in j.children" :key="k">
                    <el-button type="warning" plain @click="clId(k.id)"
                      >{{ k.authName }}{{ k.id }}
                      <el-icon class="el-icon--right"><Close /></el-icon>
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button size="small">取消</el-button>
        <el-button type="primary" @click="fnn">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { postAuthorization } from '@/api/authorization'
import { getJurisdictionList } from '@/api/jurisdictionTable'
import { Close, CaretRight } from '@element-plus/icons-vue'
import { useCounterStoreB } from '@/stores/temporary'
import { getRoleTable } from '@/api/roleTable'
const storeB = useCounterStoreB()
const userForm = ref()
const jurisdictionTable = ref()
const rowIdB = ref()
const addStateB = ref(storeB.addState)
interface IRoleTable {
  data: {
    data: Array<{
      id: number
      roleName: string
      roleDesc: string
      children: [
        {
          authName: string
          id: number
          path: string
          children: [
            {
              authName: string
              id: number
              path: string
              children: [{ authName: string; id: number; path: string }]
            },
          ]
        },
      ]
    }>
  }
}

// 获取角色列表
const fn = async (rowid: number) => {
  try {
    const res = (await getRoleTable()) as IRoleTable
    const tableData = res.data.data
    userForm.value = tableData.find((item) => item.id === rowid)?.children
  } catch {
    console.log('err')
  }
}
// 获取权限列表
const fnB = async () => {
  try {
    const res = (await getJurisdictionList('tree')) as IRoleTable
    jurisdictionTable.value = res.data.data
  } catch {
    console.log('err')
  }
}
const pushId = ref<string[]>([])
const clId = async (id: number) => {
  pushId.value.push(id.toString())
}
interface IAuthorization {
  data: {
    meta: {
      msg: string
      status: number
    }
  }
}
const fnn = async () => {
  try {
    const res = (await postAuthorization({
      roleId: rowIdB.value,
      rids: pushId.value,
    })) as IAuthorization
    if (res.data.meta.status === 200) {
      addStateB.value = !addStateB.value
      storeB.stateFun(addStateB.value)
      pushId.value = []
    } else {
      pushId.value = []
    }
  } catch {
    console.log('err')
  }
}

onMounted(() => {
  fn(31)
  fnB()
})
watch(
  () => storeB.rowId,
  (i) => {
    rowIdB.value = i
  },
)
// 监听storeB中的rowId变化
watch(
  () => storeB.rowId,
  (newVal) => {
    fn(newVal)
  },
)
watch(
  () => storeB.addState,
  (newVal) => {
    addStateB.value = newVal
  },
)
</script>

<style scoped lang="scss">
.box {
  background: #fff;
  width: 90vw;
  height: 80vh;
  overflow: auto;
  padding: 10px 20px;
  h2 {
    margin: 0;
  }
  .childrenBox {
    padding: 10px 50px;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    .oneRank {
      width: 30%;
      display: flex;
      align-items: center;
    }
    .towRank {
      width: 25%;
      display: flex;
      align-items: center;
      flex-direction: column;
      .B {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .B1 {
          display: flex;
          align-items: center;
          padding: 10px;
          border-bottom: 2px solid #cccccc4a;
        }
        .threeRank {
          width: 50%;
          display: flex;
          align-items: center;
          .C {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 2px solid #cccccc4a;
          }
        }
      }
    }
  }
}
</style>
